<template>
  <a-modal
    v-model:open="state.dialog.isShowDialog"
    width="1000px"
    style="height: 600px"
    centered
    :title="state.dialog.title"
    @ok="handleSubmit"
  >
    <a-form :model="state.form">
      <a-form-item label="工具名称">
        <a-input v-model:value="state.form.name" />
      </a-form-item>
      <a-form-item label="工具描述">
        <a-textarea
          v-model:value="state.form.desc"
          :rows="3"
          placeholder="请描述工具的功能"
          :maxlength="6"
        />
      </a-form-item>
      <a-form-item label="输入参数">
        <div class="dynamic-table">
          <!-- 动态表格 -->
          <a-table
            :columns="columns.input"
            :data-source="state.form.inputParams"
            :row-key="(record: any) => record.key"
            size="small"
            bordered
            :pagination="false"
          >
            <!-- 表头插槽 -->
            <template #headerCell="{ column }">
              <span>{{ column.title }}</span>
            </template>
            <!-- 自定义单元格渲染 -->
            <template #bodyCell="{ column, record, index }">
              <template v-if="column.dataIndex === 'paramName'">
                <a-input
                  v-model:value="record.paramName"
                  :placeholder="`请输入${column.title}`"
                />
              </template>
              <template v-else-if="column.dataIndex === 'paramDesc'">
                <a-input
                  v-model:value="record.paramDesc"
                  :placeholder="`请输入${column.title}`"
                />
              </template>
              <template v-else-if="column.dataIndex === 'paramType'">
                <a-select
                  v-model:value="record.paramType"
                  placeholder="请选择类型"
                  style="width: 140px"
                >
                  <a-select-option value="string">字符串</a-select-option>
                  <a-select-option value="number">数字</a-select-option>
                  <a-select-option value="boolean">布尔值</a-select-option>
                </a-select>
              </template>
              <template v-else-if="column.dataIndex === 'isRequired'">
                <a-checkbox v-model="record.isRequired">是</a-checkbox>
              </template>
              <template v-else-if="column.key === 'action'">
                <a-button danger type="text" @click="deleteRow(record.key)">
                  删除
                </a-button>
              </template>
            </template>
          </a-table>
        </div>
        <div class="mt-[10px]">
          <a class="text-[#1677ff]" @click="addRow">
            <PlusOutlined class="mr-[5px]" />新增参数
          </a>
        </div>
      </a-form-item>
      <a-form-item label="输出参数">
        <div class="dynamic-table">
          <!-- 动态表格 -->
          <a-table
            :columns="columns.input"
            :data-source="state.form.inputParams"
            :row-key="(record: any) => record.key"
            size="small"
            bordered
            :pagination="false"
          >
            <!-- 表头插槽 -->
            <template #headerCell="{ column }">
              <span>{{ column.title }}</span>
            </template>
            <!-- 自定义单元格渲染 -->
            <template #bodyCell="{ column, record, index }">
              <template v-if="column.dataIndex === 'paramName'">
                <a-input
                  v-model:value="record.paramName"
                  :placeholder="`请输入${column.title}`"
                />
              </template>
              <template v-else-if="column.dataIndex === 'paramDesc'">
                <a-input
                  v-model:value="record.paramDesc"
                  :placeholder="`请输入${column.title}`"
                />
              </template>
              <template v-else-if="column.dataIndex === 'paramType'">
                <a-select
                  v-model:value="record.paramType"
                  placeholder="请选择类型"
                  style="width: 140px"
                >
                  <a-select-option value="string">字符串</a-select-option>
                  <a-select-option value="number">数字</a-select-option>
                  <a-select-option value="boolean">布尔值</a-select-option>
                </a-select>
              </template>
              <template v-else-if="column.dataIndex === 'isRequired'">
                <a-checkbox v-model="record.isRequired">是</a-checkbox>
              </template>
              <template v-else-if="column.key === 'action'">
                <a-button danger type="text" @click="deleteRow(record.key)">
                  删除
                </a-button>
              </template>
            </template>
          </a-table>
        </div>
        <div class="mt-[10px]">
          <a class="text-[#1677ff]" @click="addRow">
            <PlusOutlined class="mr-[5px]" />新增参数
          </a>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { InitParamItem, FormState } from '@/types/tools';

  // 定义子组件向父组件传值/事件
  const emit = defineEmits(['refresh']);

  // 动态表头配置
  const columns = reactive({
    input: [
      {
        title: '参数名称',
        dataIndex: 'paramName',
        key: 'paramName',
      },
      {
        title: '参数描述',
        dataIndex: 'paramDesc',
        key: 'paramDesc',
      },
      {
        title: '参数类型',
        dataIndex: 'paramType',
        key: 'paramType',
      },
      {
        title: '传入方法',
        dataIndex: 'inputMethod',
        key: 'inputMethod',
      },
      {
        title: '是否必填',
        dataIndex: 'isRequired',
        key: 'isRequired',
      },
      { title: '操作', key: 'action' },
    ],
    output: [],
  });

  // 获取默认参数配置
  const getDefaultParam = (): InitParamItem => ({
    key: `param-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, // 唯一标识
    paramName: '新参数', // 默认参数名称
    paramDesc: '请输入参数描述', // 默认描述
    paramType: 'string', // 默认类型为字符串
    inputMethod: 'input', // 默认输入方式为文本框
    isRequired: false, // 默认非必填
  });

  const state = reactive({
    dialog: {
      isShowDialog: false,
      title: '新增工具',
    },
    form: {
      name: '',
      desc: '',
      inputParams: [getDefaultParam()],
      outputParams: [],
    } as FormState,
  });

  const openDialog = () => {
    state.dialog.isShowDialog = true;
  };

  // 新增行方法
  const addRow = () => {
    const newParam: InitParamItem = {
      key: `param-${Date.now()}`,
      paramName: '',
      paramDesc: '',
      paramType: 'string',
      inputMethod: 'input',
      isRequired: false,
    };

    state.form[`inputParams`].push(newParam);
  };

  // 删除行方法
  const deleteRow = (key: string) => {
    state.form.inputParams = state.form.inputParams.filter(
      (item) => item.key !== key,
    );
  };

  // 数据提交方法
  const handleSubmit = () => {
    console.log('提交数据:', state.form.inputParams);
  };

  // 暴露变量
  defineExpose({
    openDialog,
  });
</script>

<style scoped></style>
